import React, { useEffect, useState } from 'react';
import { RollbackOutlined } from '@ant-design/icons'
import { Divider, Button, Form, Input, Select, notification } from 'antd'
import CustomTable from '../../../../components/ccl/CustomTable';
import './index.scss'
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../api/ccl'

const { Option } = Select;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const AddPack = () => {
    const [form] = Form.useForm();
    const history = useNavigate()
    const [data, setData] = useState([])

    useEffect(() => {
        addaccountList()
    }, [])
    const addaccountList = async () => {
        const res = await service.findallsettle({ page: 1, limit: 5 })
        if (res.data.code == 200) {
            notification.success({ message: '查询成功', duration: 2 })
            setData(res.data.data.records)
            console.log(res.data.data.records);

        } else {
            notification.error({ message: '查询失败', duration: 2 })
        }
    }
    // 新增
    const onFinish = async (values: any) => {
        values.settleTime = formattedDate
        const res = await service.addaccount(values)
        if (res.data.code == 200) {
            notification.success({ message: '新增成功', duration: 2 })
            var newList = JSON.parse(JSON.stringify(data))
            newList.push(values)
            setData(newList)
        }
    };
    var date = new Date()
    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date
        .getHours()
        .toString()
        .padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date
            .getSeconds()
            .toString()
            .padStart(2, '0')}`;
    const onGenderChange = (value: string) => {

    };
    // 提交
    const onReset = () => {
        history(-1)
    };

    // 结算
    const handAccount = () => {

    }

    const columns = [
        {
            title: '序号',
            key: 'index',
            render: (_: any, __: any, index: any) => index + 1,
        },
        {
            title: '单号',
            key: 'settleWaybill',
            dataIndex: 'settleWaybill',
        },
        {
            title: '客户',
            key: 'settleCostmer',
            dataIndex: 'settleCostmer',
        },
        {
            title: '仓库',
            key: 'settleDepartment',
            dataIndex: 'settleDepartment',
        },
        {
            title: '品类',
            key: 'settleType',
            dataIndex: 'settleType',
        },
        {
            title: '成色',
            key: 'settleColor',
            dataIndex: 'settleColor',
        },
        {
            title: '重量(g)',
            key: 'settleWeight',
            dataIndex: 'settleWeight',
        },
        {
            title: '数量',
            key: 'settleNum',
            dataIndex: 'settleNum',
        },
        {
            title: '制表时间',
            key: 'settleTime',
            dataIndex: 'settleTime',
        },

    ]
    let newData = data.map((item: any, index: any) => ({
        key: index,
        index: item.chooseId,
        settleWaybill: item.settleWaybill,
        settleType: item.settleType,
        settleCostmer: item.settleCostmer,
        settleDepartment: item.settleDepartment,
        settleStatus: item.settleStatus,
        settleColor: item.settleColor,
        settleWeight: item.settleWeight,
        settleNum: item.settleNum,
        settleTime: item.settleTime,
        chooseWeight: item.chooseWeight,
        choosePartment: item.choosePartment

    }))
    return (
        <div className='addpack'>
            <div className="header">
                <h3>新增结算单</h3>
                <div className="right">
                    <Button type="primary" onClick={onReset}>
                        <RollbackOutlined />返回
                    </Button>
                </div>
            </div>
            {/* 分割线*/}
            <Divider />
            <h4>基本信息</h4>
            {/* 输入框 */}
            <Form
                {...layout}
                form={form}
                name="control-hooks"
                onFinish={onFinish}

            >
                <Form.Item name="settleWaybill" style={{ width: 340 }} label="单号：" rules={[{ required: true, message: '请输入内容!' }]} >
                    <Input />
                </Form.Item>
                <Form.Item name="gender" style={{ width: 340 }} label="品类：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="黄金修饰品">黄金修饰品</Option>
                        <Option value="黄金珍藏品">黄金珍藏品</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleType" style={{ width: 340 }} label="类型：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="销售订单">销售订单</Option>
                        <Option value="退货单">退货单</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleCostmer" style={{ width: 340 }} label="客户：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="老凤祥">老凤祥</Option>
                        <Option value="中国黄金">中国黄金</Option>
                        <Option value="周大福">周大福</Option>
                        <Option value="盛峰黄金">盛峰黄金</Option>
                        <Option value="六福珠宝	">六福珠宝	</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleDepartment" style={{ width: 340 }} label="仓库：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="精品柜A仓">精品柜A仓</Option>
                        <Option value="精品柜B仓">精品柜B仓</Option>
                        <Option value="精品柜C仓">精品柜C仓</Option>
                        <Option value="精品柜D仓">精品柜D仓</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleColor" style={{ width: 340 }} label="成色：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="千足金9999">千足金9999</Option>
                        <Option value="万足金10000">万足金10000</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleStaus" style={{ width: 340 }} label="状态：" rules={[{ required: true, message: '请输入内容!' }]}>
                    <Select
                        placeholder="请选择！"
                        onChange={onGenderChange}
                        allowClear
                    >
                        <Option value="编辑">编辑</Option>
                        <Option value="已完成">已完成</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="settleNum" style={{ width: 340 }} label="数量：" >
                    <Input />
                </Form.Item>
                <Form.Item name="settleWeight" style={{ width: 340 }} label="重量：" >
                    <Input />
                </Form.Item>
                <Form.Item name="settleTime" style={{ width: 340 }} label="制表时间" >
                    <Input />
                </Form.Item>

                <div className="table">
                    <h4>结算信息</h4>
                    <div className="right">
                        <Button type="primary" htmlType='submit' onClick={handAccount}>结算</Button>
                    </div>
                </div>
            </Form>

            <CustomTable data={newData} columns={columns} />

        </div>
    );
};

export default AddPack;